<template>
    <div>
        <UserMb>
            <template slot="title">我的积分</template>
            <template slot="content">
                <div class="MyJfExBox">
                    <div class="MyJfHBox flex f-s">
                        <div>
                        <span class="MyJfHspan1">当前积分：</span>
                        <span class="MyJfHspan2">{{jfNum}}分</span>
                        </div>
                    </div>
                    <div class="MyJfListBox">
                        <div class="MyJfThBox flex f-s">
                            <div class="th1 f12 c3 flex">积分日期</div>
                            <div class="th2 f12 c3 flex">变动</div>
                            <div class="th3 f12 c3 flex">来源</div>
                        </div>
                        <template v-for="(v,k) in jfArr">
                            <div class="MyJfTdBox flex f-s" :key="k + 'jfArr'">
                                <div class="th1 td c3 flex">{{v.sj}}</div>
                                <div class="th2 td c3 flex">{{v.bd}}</div>
                                <div class="th3 td c3 flex">{{v.ly}}</div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </UserMb>
    </div>
</template>

<script>
import UserMb from "../../gj/UserMb";
export default {
    name:"MyJf",
    data() {
        return {
            jfNum:240,
            jfArr:this.$store.state.jfArr,
        }
    },
    components:{
        UserMb,
    }
}
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.fd-c {
  flex-direction: column;
}
.ai-fs {
  align-items: flex-start;
}
.ai-fe {
  align-items: flex-end;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f12{
    font-size: 12px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.c2a {
  color: #2a2a2a;
}
</style>

<style scoped>
.MyJfExBox{
    margin-left: 20px;
}
.MyJfHBox{
    height: 57px;
}
.MyJfHspan1{
    font-size: 12px;
    color: #333333;
}
.MyJfHspan2{
    font-size: 13.5px;
    color: #f08200;
}
.MyJfListBox{
    width: calc(100% - 2px);
    border: 1px solid #e9e9e9;
}
.MyJfThBox{
    width: 100%;
    height: 46px;
    background-color: #f2f2f2;
}
.th1{
    width: 296px;
    height: 100%;
    margin-right: 164px;
}
.th2{
    width: 172px;
    height: 100%;
    margin-right: 179px;
}
.th3{
    width: 233px;
    height: 100%;
}
.MyJfTdBox{
    width: 100%;
    height: 53px;
    border-bottom: 1px solid #e9e9e9;
}
.MyJfTdBox:nth-last-of-type(1){
    border-bottom: none;
}
.td{
    font-size: 10.5px;
    color: #666666;
}
</style>